<template>
  <div class="after-node-btn" @click="visible = true">
    <el-popover
      placement="right"
      v-model="visible"
      trigger="click"
      title="添加节点"
      width="422"
    >
      <div
        mode="vertical"
        class="flow-ant-menu-vertical"
        style="box-sizing: initial"
      >
        <div key="1" @click="addType(1)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>审批节点</span>
        </div>
        <div key="4" @click="addType(4)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>分支节点</span>
        </div>
        <div key="7" @click="addType(7)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>意见分支</span>
        </div>
        <div key="9" @click="addType(9)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>并行分支</span>
        </div>
        <div key="2" @click="addType(2)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>抄送节点</span>
        </div>
        <div key="6" @click="addType(6)">
          <el-icon>
            <Stamp />
          </el-icon>

          <span>办理节点</span>
        </div>
        <div key="20" @click="addType(20)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>通知节点</span>
        </div>
        <div key="5" @click="addType(5)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>事件节点</span>
        </div>
        <div key="21" @click="addType(21)">
          <el-icon>
            <Stamp />
          </el-icon>
          <span>子流程</span>
        </div>
      </div>
      <!-- 当审批节点下添加意见分支,就不允许添加其他类型的节点了 -->
      <template #reference>
        <el-button
          :icon="Plus"
          v-if="
            !readable &&
            (nodeType.value != 1 || (nodeType.value == 1 && node.addable))
          "
          circle
        />
      </template>
    </el-popover>
  </div>
</template>
<script setup name="FlowAddNode">
import { Plus } from "@element-plus/icons-vue";
import useFlowHook from "@/hook/useFlowHook";

import {
  approverNode,
  ccNode,
  branchNode,
  eventNode,
  suggestNode,
  parallelNode,
  noticeNode,
} from "./node/node";

import {
  reactive,
  ref,
  createApp,
  
  toRefs,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const store = useStore();
/* 组件局部注册 */
const app = createApp({});
const { currentInstance, proxy } = getCurrentInstance();

const { uuid } = useFlowHook();

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {
        addable: true,
      };
    },
  },
  nodeType: {
    type: Number,
    default: 1,
  },
  id: {
    type: String,
    default: "",
  },
  readable: {
    type: Boolean,
    default: false,
  },
});
const { node, nodeType, id, readable } = toRefs(props);

//定义一个数据
const visible = ref(false);

//vue3 中methods
const addType = (type) => {
  var addNode = null;
  switch (type) {
    case 1:
    case 6:
      //添加审批节点
      addNode = proxy.$deepCopy(addApproverNode(type));
      // addNode = proxy.$deepCopy(approverNode);
      break;
    case 2:
      //添加抄送节点
      //addNode = proxy.$deepCopy(ccNode);
      addNode = proxy.$deepCopy(addCcNode(type));
      break;
    case 4:
      //添加分支节点
      addNode = proxy.$deepCopy(addBranchNode(type));
      //addNode = proxy.$deepCopy(branchNode);
      break;
    case 5:
      //添加事件节点
      addNode = proxy.$deepCopy(addEventNode(type));
      //addNode = proxy.$deepCopy(eventNode);

      break;
    case 7:
      //添加意见分支节点
      addNode = proxy.$deepCopy(addSuggestNode(type));
      //addNode = proxy.$deepCopy(suggestNode);

      break;
    case 9:
      //添加并行节点
      addNode = proxy.$deepCopy(addParallelNode(type));
      //addNode = proxy.$deepCopy(parallelNode);

      break;
    case 20:
      //添加通知节点
      addNode = proxy.$deepCopy(addNoticeNode(type));
      //addNode = proxy.$deepCopy(noticeNode);
      break;
    case 21:
      //添加通知节点
      addNode = proxy.$deepCopy(addSubNode(type));
      //addNode = proxy.$deepCopy(noticeNode);
      break;
  }

  let currNode = node.value;
  let flowType = nodeType.value;
  let nodeId = id.value;

  // 添加节点
  store.dispatch("process/addNode", { addNode, currNode, flowType, nodeId });

  if (flowType == 1 && type == 7) {
    // 当审批节点下添加意见分支,就不允许添加其他类型的节点了
    store.dispatch("process/updateNode", {
      currNode,
      field: "addable",
      value: false,
    });
  }
  // console.log("节点添加成功--------------");
};

/**
 * 添加审批节点 ||
 */
const addApproverNode = (type) => {
  return {
    id: uuid(),
    name: type == 1 ? "审批人" : "办理人",
    //name: "审批人",
    type: 1,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 显示内容
    content: null,
    config: {
      // 审批人模式
      assignedType: "ASSIGN_USER",
      // 多人审批方式
      approvalMode: "NEXT",
      nobody: {
        //PASS 直接通过、 TO_ADMIN 转交主管理员、TO_USER 转交指定人员
        handler: "AUTO",
        //TO_USER 时的指定人员
        assignedUser: [],
      },
      reject: {
        //TO_END 驳回直接结束流程、TO_NODE 驳回到指定节点、TO_BEFORE 驳回到上一级
        type: "TO_END",
        target: "", //驳回到指定ID的节点
      },
      //指定主管审批
      leader: {
        level: 1, //发起人指定级别主管
      },
      role: [],
      assignedUser: [],
      //发起人自选
      selfSelect: {
        multiple: true, // 是否多选 true/false
      },
      // 层级模式
      levelMode: 1,
      // 审批人ID
      approverIds: [],
      // 审批人名称
      approverNames: [],
      // 表单权限
      formPerms: [],
      // 高级配置
      configure: {},
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
      // 是否有错误
      error: false,
    },
    // 子节点
    childNode: null,
  };
};
/**
 * 添加抄送节点
 */
const addCcNode = (type) => {
  return {
    id: uuid(),
    name: "抄送人",
    type: 2,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示内容
    content: null,
    config: {
      // 抄送人设置
      approverGroups: [
        {
          id: uuid(),
          // 审批人模式
          approverType: 1,
          // 层级模式
          levelMode: 1,
          // 审批人ID
          approverIds: [],
          // 审批人名称
          approverNames: [],
        },
      ],
      // 表单权限
      formPerms: [],
      // 高级配置
      configure: {},
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
      // 是否有错误
      error: false,
    },
  };
};
/**
 * 添加通知节点
 */
const addNoticeNode = (type) => {
  return {
    id: uuid(),
    name: "通知",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    props: {
      // 审批设置
      approverGroups: [
        {
          id: uuid(),
          // 审批人模式
          approverType: 1,
          // 层级模式
          levelMode: 1,
          // 审批人ID
          approverIds: [],
          // 审批人名称
          approverNames: [],
        },
      ],
    },
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
  };
};
/**
 * 添加事件节点
 */
const addEventNode = (type) => {
  return {
    id: uuid(),
    name: "事件",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    config: {
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
      // 是否有错误
      error: false,
    },
  };
};
/**
 * 添加办理节点
 */
const addWriteNode = (type) => {
  return {
    id: uuid(),
    name: "办理",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    config: {
      // 表单权限
      formPerms: [],
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
      // 是否有错误
      error: false,
    },
  };
};
/**
 * 添加分支节点
 */
const addBranchNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "条件分支",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 条件节点
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "分支1",
        type: 3,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        config: {
          // 分支类型
          branchType: 1,
          //条件表达式
          expression: "",
          // 优先级
          priorityLevel: 1,
          // 显示优先级
          showPriorityLevel: true,
          // 条件组
          conditionGroup: [],
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        },
      },
      {
        id: uuid(),
        pid: uid,
        name: "其他情况",
        type: 3,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        config: {
          // 条件组
          conditionGroup: [],
          // 分支类型
          branchType: 1,
          //条件表达式
          expression: "",
          // 优先级
          priorityLevel: 2,
          // 显示优先级
          showPriorityLevel: true,
          // 流程基础配置属性
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
          // 显示内容
          content: "其他情况进入此流程",
        },
      },
    ],
  };
};
/**
 * 添加意见分支节点
 */
const addSuggestNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "意见",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 是否有错误
    error: false,
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "同意",
        type: 8,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        config: {
          // 优先级
          priorityLevel: 2,
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        },
      },
      {
        id: uuid(),
        pid: uid,
        name: "不同意",
        type: 8,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        config: {
          // 优先级
          priorityLevel: 2,
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
        },
      },
    ],
  };
};
/**
 * 添加并行节点
 */
const addParallelNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "并行",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 显示添加按钮
    addable: true,
    // 聚合节点
    childNode: {
      id: uuid(),
      pid: uid,
      name: "聚合",
      type: 11,
      status: -1,
      childNode: null,
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
    },
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "并行1",
        type: 10,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        config: {
          // 分支类型
          branchType: 3,
          // 条件组
          conditionGroup: [],
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
          // 是否有错误
          error: false,
          // 显示内容
          content: "并行任务",
        },
      },
      {
        id: uuid(),
        pid: uid,
        name: "并行2",
        type: 10,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        config: {
          // 分支类型
          branchType: 3,
          // 条件组
          conditionGroup: [],
          // 是否有错误
          error: false,
          // 显示内容
          content: "并行任务",
          // 显示添加按钮
          addable: true,
          // 可删除提示
          deletable: false,
        },
      },
    ],
  };
};

/**
 * 添加子流程节点
 */
const addSubNode = (type) => {
  return {
    id: uuid(),
    name: "子流程",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    props: {
      // 审批设置
      approverGroups: [
        {
          id: uuid(),
          // 审批人模式
          approverType: 1,
          // 层级模式
          levelMode: 1,
          // 审批人ID
          approverIds: [],
          // 审批人名称
          approverNames: [],
        },
      ],
    },
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
  };
};
</script>